<template>
    <div class="module">
        <el-collapse v-model="activeNames" accordion>
            <el-collapse-item v-for="(item,index) in module.list" :title="item.title" :key="index" :name="index">
                <ul class="item-box">
                    <li v-for="(ite,ind) in item.list" :key="ind" @click="comClick(ite)" :ref="index+'-id-'+ind" @dragstart="dragstart($event, ite)" @dragend="dragend" draggable="true">
                        <!-- <img draggable="false" :src="ite.p" alt=""> -->
                        <i :class="`iconfont ${ite.icon}`"/>
                        <p>{{ite.name}}</p>
                    </li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import module from '@/util/module.js';
export default {
    data() {
        return {
            module,
            activeNames: [0]
        }
    },
    mounted(){
        
    },
    methods: {
        //开始拖动模块
		dragstart(event, item) {
            event.target.style.opacity = '0.4'

			event.dataTransfer.setData('text', JSON.stringify(item));
			// event.dataTransfer.effectAllowed = 'copyMove';
            
            // 拖动的时候 显示可放入的位置
            this.$store.commit('toggleDragBox', true)
		},
		
		//拖动结束
		dragend(event) {
            // console.log('结束',event.dataTransfer.getData('text'))
            event.target.style.opacity = "";
            this.$store.commit('toggleDragBox', false)
		},
        //模块点击 
		comClick(item) {
			let json = JSON.stringify(item);
            this.$store.dispatch('addModule',json)
            this.$store.commit('isAddModule',true)
		},
    },
}
</script>

<style lang="scss" scoped>
.module{user-select:none;
    /deep/ .el-collapse-item__header{font-weight: bold;font-size: 14px;padding-left: 20px}
    /deep/ .el-collapse-item__content{padding: 10px 0 10px 20px}
    .item-box{display: flex;align-items: flex-start;flex-wrap: wrap;
        &>li{width: 25%;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:0 28px 10px 0;padding: 10px;box-sizing: border-box;transition: all .3s;
            &:hover{box-shadow: 0 0 8px 2px rgba($color: #81a6ff, $alpha: .3);cursor: move;color: #81a6ff;}
            .iconfont{font-size: 36px;line-height: 36px;margin-bottom: 8px;}
            p{font-size: 12px;}
        }
    }
}
</style>

